<template>
	<view class="collect-money-page">
		<view class="upper-part">
			<view class="name">微信昵称：<text class="colorStyle">{{weChatName}}</text></view>
			<view class="img-box">
				<image class="img" :src="weChatImg" mode="" v-if="weChatImg"></image>
				<view class="upload-box" v-else @click="chooseImage">
					<view class="upload-img el-icon-ali-upload-img"></view>
				</view>
			</view>
		</view>
		<view class="next-part">
			<view>上传微信收款码须知：</view>
			<view>1、每个账号只能添加一个微信收款码，<text class="colorStyle">添加、修改二维码请联系平台客服</text></view>
			<view>2、收款码主要用于商家<text class="colorStyle">任务本金收款</text></view>
			<view>3、添加二维码<text class="colorStyle">一定是微信收款码</text>，否则收不到本金后果自负</view>
		</view>
		<button v-if="type==1" class="add-btn" :class="weChatImg ? 'themeBackgroundColor': 'bgColorStyle'"  :loading="loading" :disabled="loading" @click="confirm">提交</button>
	</view>
</template>

<script>
	import qiniuUploader from '../../components/qiniu/qiniuUploader.js';
	import {
		apiBindWxPayCode,
		apiBindPushUserInfo,
		apiUploadToken
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data(){
			return {
				weChatName: '',
				weChatImg: '',
				uploadToken: '',
				loading: false,
				type: 1,
			}
		},
		onLoad(option) {
			this.type = option.type
			apiUploadToken({}).then(res =>{
			    if(res.data.code == 1)  {
					this.uploadToken = res.data.msg
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		onShow() {
			apiBindPushUserInfo({
				token: this.token
			}).then(res =>{
			    if(res.data.code == 1)  {
					this.weChatName = res.data.msg.we_chat_name
					// this.weChatImg = res.data.msg.wx_pay_code
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		methods:{
			chooseImage() {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['origial','compressed'],
					success: res => {
						that.uploadImg(res,res.tempFiles[0].size > 1570000);
					},
					fail: function() {
						that.$msg.showToast('载入图片失败，请稍后再试')
					}
				});
			},
			uploadImg(typeimg,fileSize){
				var that = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.getImageInfo({
					src:typeimg.tempFilePaths[0],
					success(res) {
						// let canvasWidth = res.width //图片原始长宽
						// let canvasHeight = res.height
						// let img = new Image()
						// img.src = res.path;
						// document.getElementById("uploadImgPath").src = res.path;
						// let canvas = document.createElement('canvas');
						// let ctx = canvas.getContext('2d')
						// let scale = res.height/res.width
						// canvas.width = fileSize == true ? 500 : canvasWidth
						// canvas.height = fileSize == true ? 500*scale : canvasHeight

						// ctx.drawImage(document.getElementById("uploadImgPath"), 0, 0, fileSize == true ? 500 : canvasWidth , fileSize == true ? 500*scale : canvasHeight )//fileSize == true ? 300 : canvasHeight / 2

						// canvas.toBlob(function(fileSrc) {
						// 	let imgSrc = window.URL.createObjectURL(fileSrc)
							let imgSrc = res.path;
							var random = Math.floor(Math.random() * (1000 - 1)) + 1
							var timestamp=new Date().getTime();
							var name=imgSrc.substring(imgSrc.lastIndexOf("-")+1);
							var key = name + random.toString() + timestamp.toString() + '.png'
							 qiniuUploader.upload(
							    imgSrc,
							    res => {
							        //图片上传完成后返回值
									that.weChatImg = res.imageURL;
									that.$msg.showToast('上传成功')
							    },
							    error => {
							        // resolve(error)
									uni.hideLoading()
									that.$msg.showToast('上传失败')
							    },
							    {
							        region: that.GLOBAL.REGION_VALUE, // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
							        domain: that.GLOBAL.QINIU_URL, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL                                         字  段。否则需要自己拼接
							        key: 'wxPayCode/' + key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
							        // 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
							        uptoken: that.uploadToken // 由其他程序生成七牛 uptoken
							    },
							    res => {
							         //上传进度
							        if(res.progress === 100){
										uni.hideLoading()
							        }
							    }
							);
						// })
					}
				})

			},
			confirm(){
				if(!this.weChatImg){
					this.$msg.showToast('请先上传微信收款码图片')
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.loading = true
				apiBindWxPayCode({
					token: this.token,
					wxPayCode: this.weChatImg
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.loading = false
						uni.hideLoading()
						this.$msg.showToast('提交成功')
						setTimeout(()=>{
							uni.switchTab({
								url:'../profile/a'
							})
						},500)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			}
		}

	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	.collect-money-page {
		.colorStyle {
			color: $theme-color;
		}
		.upper-part {
			background: #FFFFFF;
			text-align: center;;
			margin-bottom: 32upx;
			.name {
				padding: 32upx 0;
				font-size: 32upx;
			}
			.img-box {
				padding-bottom: 60upx;
				.img {
					width: 70%;
					height: 660upx;

				}
				.upload-box {
					width: 70%;
					height: 660upx;
					border: 1px dashed #E0E0E0;
					margin: 0 auto;
					display:flex;
					justify-content:center;
					align-items:center;
					border-radius: 10upx;
				}
				.upload-img {
					font-size: 80upx;
					color: #888888;
				}
			}
		}
		.next-part {
			background: #FFFFFF;
			padding: 32upx;
			font-size: 30upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 48upx;
		}
		.add-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 96upx;
			margin: 100upx 36upx 20upx 36upx;
			font-size: 32upx;
			color: #fff;
			border-radius: 10upx;

			&.bgColorStyle {
				background: #ababab;
				box-shadow: 1px 2px 5px #ababab;
			}
			&.themeBackgroundColor {
				background: $theme-background-color;
				box-shadow: 1px 2px 5px #FF8C00;
			}
		}
	}
</style>

